import React, { useState } from 'react';
import { Modal, Button, Input, Table, Tooltip } from 'antd';
import config from '../../config/config';
import styles from './TextChatDialog.less';

const Search = Input.Search;

const ChatDialogModal = (props) => {

    const [ cachedHistoryRecords, setCachedHistoryRecords ] = useState([]);
    const [ editableRecordKey, setEditableRecordKey ] = useState(null);
    const {
        themeColor, chatDialogModalVisible, deleteDialog, closeDialogModal, documentType, rowSelection, historyRecords,
        documentLoading, selectedDialogRows, onSaveDialog, onDownload
    } = props;
    console.log("UserModal documentType => ", documentType);

    const searchDialogChange = (e) => {
        const value = e.target.value;
        const records = historyRecords.filter(item => item.name.includes(value));
        setCachedHistoryRecords(records);
    }

    let selectedCount = selectedDialogRows.length;
    const generateHeader = () =>
        <div style={{ display: "flex", flexDirection: "row" }}>
            <div>对话管理</div>
            <div style={{ margin: "-5px 0px 0px 50%" }}>
                <Input id="chatDialogSearch" allowClear placeholder={"请输入对话名"} style={{ width: 280, borderRadius: "20px" }} onChange={searchDialogChange} prefix={<i className="ri-search-line" />}/>
            </div>
        </div>;

    const generateFooter = () =>
        <div style={{ display: "flex", flexDirection: "row", padding: "8px 0px 0px 0px" }}>
            <div style={{ padding: "5px 0px 0px 0px" }}>共 {historyRecords.length} 条，已选 {selectedCount} 条</div>
            <div style={{ flex: 2 }}>
                <Button size="default" style={{ marginRight: 20 }} onClick={() => closeDialogModal()}>取消</Button>
                <Button size="default" disabled={!selectedCount} style={{ background: selectedCount ? themeColor : config.global_gray }} loading={documentLoading} onClick={() => deleteDialog()}>删除</Button>
            </div>
        </div>;

    const onEdit = (record) => {
        setEditableRecordKey(record.id);
    }

    const saveDialog = (value, record) => {
        if (value != record.name) {
            record.name = value;
            onSaveDialog(record);
        }
        setEditableRecordKey(null);
    }

    const columns = [
        { title: '序号', width: '10%', render: (text, record, index) => <span>{index + 1}</span> },
        { title: '对话名', dataIndex: 'name', key: 'name', width: '50%', render: (text, record, index) => {
                if (editableRecordKey && editableRecordKey == record.id) {
                    return <Search defaultValue={text} onSearch={value => saveDialog(value, record)} enterButton={< i class="ri-check-line" />} />
                }
                return <span className={styles.chat_dialog_table_ellipsis} title={text}>{text}</span>
            }
        },
        { title: '对话时间', dataIndex: 'create_time', key: 'create_time', width: '25%' },
        { title: '操作', key: 'operate', width: '15%',
            render: (text, record) => (
                <span style={{padding: "0px 5px 0px 5px"}}>
                    <Tooltip title={"编辑对话"}>
                        <a onClick={() => onEdit(record)}>
                            <i className="ri-edit-fill" />
                        </a>
                    </Tooltip>
                    &nbsp;&nbsp;&nbsp;
                    <Tooltip title={"导出对话"}>
                        <a onClick={() => onDownload(record)}>
                            <i className="ri-download-fill" />
                        </a>
                    </Tooltip>
                </span>)
        }];

    let searchDom = document.getElementById("chatDialogSearch");

    return (
        <div>
            <Modal
                width = {800}
                height = {650}
                title = {generateHeader()}
                open = {chatDialogModalVisible}
                onCancel = {closeDialogModal}
                footer = {generateFooter()}
                closable = {{ 'aria-label': 'Custom Close Button' }}
            >
                <div className={ styles.listTable }>
                    <Table
                        bordered
                        tableLayout={"auto"}
                        rowSelection={rowSelection}
                        columns={columns}
                        dataSource={searchDom?.value ? cachedHistoryRecords : historyRecords}
                        pagination={false}
                        loading={documentLoading}
                        rowKey={record => record.id}
                        scroll={{y: (window.innerHeight - 510)}}
                    />
                </div>
            </Modal>
        </div>
    );
};

export default ChatDialogModal;
